<template>
  <div>
    <ex-dialog width="60%" class="ex-diolog" :title='title' :visible="visible" @closeDialog="handleClose">
      <template>
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <div class="list">
            <el-form-item label="管辖区域：" prop="areaId">
              <el-select v-model="form.areaId" filterable placeholder="请选择" @change="areaIdChange">
                <el-option v-for="item in optionsArea" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="list ">
            <el-form-item label="行业：" prop="parentId">
              <el-select @change="changeParent" v-model="parentObjec" placeholder="请选择">
                <el-option v-for="item in parentList" :key="item.id" :label="item.value" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="childShopType">
              <el-select v-model="form.childShopType" @change="changechildShopType" multiple placeholder="请选择">
                <el-option v-for="item in childShopList" :key="item.id" :label="item.value" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="list">
            <el-form-item label="融安e信安全系数：" prop="safetyFactor">
              <el-select v-model="form.safetyFactor" placeholder="请选择：">
                <el-option v-for="item in settleBankTypeList" :key="item.id" :label="item.value" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="list">
            <el-form-item label="商家信用风险：" prop="creditRisks">
              <el-select v-model="form.creditRisks" placeholder="请选择：">
                <el-option v-for="item in settleBankTypeList" :key="item.id" :label="item.value" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="list">
            <el-form-item label="基准存管比例：" prop="depositRatio">
              <el-input v-model="form.depositRatio" placeholder="请输入基准存管比例"><template slot="append">%</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="list">
            <el-form-item label="动态释放规则：">
              <!-- <el-form-item class="oneList" label="" prop="initReleaseRatio">
                <div>消耗</div>
                <el-input v-model="form.initReleaseRatio" placeholder="请输入比例"><template slot="append">%</template></el-input>
                <div>释放一次</div>
              </el-form-item> -->
              <el-form-item class="oneList" label="" prop="maxReleaseRatio">
                <div>消耗</div>
                <el-input v-model="form.maxReleaseRatio" placeholder="请输入比例"><template slot="append">%</template>
                </el-input>
                <div>全部释放</div>
              </el-form-item>
            </el-form-item>
          </div>
        </el-form>
        <div class="btn_box">
          <el-button type="danger" @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" v-if="path == 'add'">确定</el-button>
          <el-button type="primary" @click="editForm('ruleForm')" v-if="path == 'edit'">修改</el-button>
        </div>
      </template>
    </ex-dialog>
  </div>
</template>
<script>
  // components
  import Loading from '@/components/Loading/index'

  // api
  import {
    getaddshopTypeList,
    addbankSupervision,
    bankSupervisionDetail,
    editbankSupervision,
  } from '@/api/moneyManagement'
  import {
    areaList
  } from "@/api/common";
  export default {
    components: {
      Loading
    },
    props: {
      visible: Boolean,
      id: String,
      path: String,
    },
    data() {
      var validateDepositRatio = (rule, value, callback) => {
        console.log('1111111', value)
        var num = new RegExp("^[0-9]*[1-9][0-9]*$");
        if (value < 0 || value > 100) {
          callback(new Error('输入大于0且小于100的整数'));
          return
        } else if (!num.test(value)) {
          callback(new Error('输入大于0且小于100的整数'));
        } else {
          callback();
        }

      };

      return {
        title: '新建规模/限额',
        settleBankTypeList: [{
            id: 0,
            value: '高'
          },
          {
            id: 1,
            value: '中'
          },
          {
            id: 2,
            value: '低'
          },
        ],
        optionsArea:[],
        parentList: [],
        childShopList: [],
        parentObjec: {},
        form: {
          parentId: '', //行业父类型id
          parentName: '', //行业父类型名称
          safetyFactor: '', //安全系数
          creditRisks: '', //信用风险
          depositRatio: '', //存管比例
          initReleaseRatio: 0, //初始释放比例
          maxReleaseRatio: 100, //最大释放比例
          childShopType: [], //子店铺行业类型数组
          areaId:'',//区域id
        },
        rules: {
          depositRatio: [{
            validator: validateDepositRatio,
            trigger: 'blur'
          }, ],
          initReleaseRatio: [{
            validator: validateDepositRatio,
            trigger: 'blur'
          }, ],
          maxReleaseRatio: [{
            validator: validateDepositRatio,
            trigger: 'blur'
          }, ],
          areaId: [{
            required: true,
            message: '请选择管辖区域',
            trigger: ['blur', 'change']
          }, ],
          parentId: [{
            required: true,
            message: '请选择行业',
            trigger: ['blur', 'change']
          }, ],
          childShopType: [{
            required: true,
            type: 'array',
            message: '请选择行业类型',
            trigger: ['blur', 'change']
          }, ],
          safetyFactor: [{
            required: true,
            message: '请选择融安e信安全系数',
            trigger: ['blur', 'change']
          }, ],
          creditRisks: [{
            required: true,
            message: '商家信用风险',
            trigger: ['blur', 'change']
          }, ],
        },
        areaIdTwo:''
      }
    },
    computed: {
      industryTypeText() {
        return this.applyDetail.type ?
          this.$getStatusText('industry_type', this.applyDetail.type) :
          ''
      }
    },
    created() {
      this.getAreaList()
      // this.getShopTypeList()
    },
    mounted() {
      if (this.path == 'edit') {
        this.getDetail()
      }
    },
    methods: {
      getAreaList() { //查询区域下拉框
        areaList().then(res => {
          this.optionsArea = res.result
        }).catch(() => {})
      },
      areaIdChange(id){ //点击区域下拉
        console.log(id)
        this.form.parentId = ''
        this.parentObjec = {}
        this.form.childShopType = []
        this.getShopTypeList(id)
      },
      //获取店铺类型
      getShopTypeList(id) {
        this.loading = true
        const params = {
          id: this.form.parentId,
          areaId: id,
        }
        this.areaIdTwo = id
        getaddshopTypeList(params).then(res => {
          this.parentList = res.result

        }).finally(() => {
          this.loading = false
        })
      },
      getchildShopType(areaId) { //获取子类型
        this.loading = true
        const params = {
          areaId: areaId,
          id: this.id,
          parentId: this.form.parentId
        }
        getaddshopTypeList(params).then(res => {
          this.childShopList = res.result

        }).finally(() => {
          this.loading = false
        })
      },
      getDetail() {
        console.log('this.id', this.id)
        this.title = '修改规模/限额'
        this.loading = true
        bankSupervisionDetail(this.id).then(res => {
          console.log('获取详情', res)
          const {
            result
          } = res
          this.data = result
          this.parentObjec = result.parent
          this.form.parentId = result.parent.id
          this.form.parentName = result.parent.value
          this.getShopTypeList(result.areaId)
          this.getchildShopType(result.areaId)
          this.form.safetyFactor = result.safetyFactor
          this.form.creditRisks = result.creditRisks
          this.form.depositRatio = result.depositRatio
          this.form.initReleaseRatio = result.initReleaseRatio
          this.form.maxReleaseRatio = result.maxReleaseRatio
          this.form.childShopType = result.childShopType
          this.form.areaId = result.areaId

        }).finally(() => {
          this.loading = false
        })
      },

      handleClose() {
        this.$emit('update:visible', false)
      },
      //选中类型
      changeParent(val) {
        console.log('val', val)
        this.form.parentId = val.id
        this.form.parentName = val.value
        this.form.childShopType = []
        this.getchildShopType(this.areaIdTwo)
      },
      //选中子类型
      changechildShopType(val) {
        console.log('val', val)
        this.form.childShopType = val
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = {
              ...this.form
            }
            addbankSupervision(params).then(res => {
              const {} = res.result
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
              })
              this.$emit('success')
              this.$emit('update:visible', false)
            }).finally(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      editForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = {
              id: this.id,
              ...this.form
            }
            editbankSupervision(params).then(res => {
              const {} = res.result
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
              })
              this.$emit('success')
              this.$emit('update:visible', false)
            }).finally(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      agreeClick() {

      },
    }
  }

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
    }

    .main {
      margin: 0 auto;
    }

    .pic-list {
      display: flex;
      // justify-content: space-around;
      flex-wrap: wrap;
      // width: 660px;
    }

    .list_box {
      display: flex;
      justify-content: flex-start;
    }

    .img_box {
      display: flex;
      flex-direction: column;
      margin-right: 24px;
    }

    .img_box img {
      width: 140px;
      height: 90px;
    }

    .btn_box {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .list {
      display: flex;

      ::v-deep .el-form-item {
        display: flex;
        justify-content: flex-start;
      }

      ::v-deep .el-form-item__label {
        width: 150px;
      }

      // ::v-deep .el-form-item__content{

      // }	
      ::v-deep .el-select {
        width: 300px;
        margin-right: 10px;
      }

      ::v-deep .el-cascader {
        width: 500px;
      }

      .oneList {
        ::v-deep .el-form-item__content {
          width: 500px !important;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 20px;
        }

        ::v-deep .el-input {
          width: 200px;
          margin: 0 14px;
        }
      }

      .twoList {
        .el-form-item__content {
          margin-right: 10px;
        }
      }
    }

  }

</style>
